<template>
  <div id="materialDistribution">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <div class="total">
        <div class="text">
          <span>可周转木方情况</span>
        </div>
      </div>
      <DataTable
        rowKey="adminId"
        :btns="btns"
        :tableData="Data"
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        @refresh="getList"
      />
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator';

@Component
export default class materialDistribution extends Vue {
  searchForm: any = {
    searchValue: ''
  };
  btns: any[] = [
    {
      label: '导出',
      icon: 'export'
      // callback: () => this.$util.exportExcelFun(this.getSearchForm, BUSINESSORDER_EXPORT),
    }
  ];
  get filterData () {
    return {
      searchValue: {
        label: '关键词',
        type: 'input',
        template: {
          placeholder: '请输入关键词',
          clearable: true
        }
      }
    };
  }
  Data: any[] = [];
  tableColumn: any = {
    account: {
      label: '公司名称',
      width: 120
    },
    userName: {
      label: '项目名称',
      width: 120
    },
    roleName: {
      label: '区域',
      width: 100
    },
    roleName1: {
      label: '项目地址',
      width: 200
    },
    roleName2: {
      label: '可周转数量',
      width: 100
    }
  };
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };

  get getSearchForm () {
    let { searchValue } = this.searchForm;
    return {
      searchValue,
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize
    };
  }

  init () {
    // this.getList();
  }
  getList () {
    let data = {
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize
    };
    this.$api.adminAdminUserListFetch(data).then((res: any) => {
      this.Data = res.data.records;
      this.pageConfig.total = res.data.total;
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current;
        this.getList();
      }
    });
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
}
</script>
<style lang='scss' scoped>
#materialDistribution {
  .total {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .text {
      margin-right: 10px;
      font-weight: bold;
      flex: 1;
      display: flex;
      span {
        margin-right: 30px;
      }
    }
  }
}
</style>
